<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>常用对象 - JavaScript</title>

    <style>
        table{
            border: 1px solid;
        }
    </style>

</head>
<body>
    <h1>常用对象</h1>
    <h4>学习目标</h4>
    <ol>
        <li>熟悉Array对象常用的方法和属性</li>
        <li>熟悉Date对象常用的方法和属性</li>
        <li>熟悉Number对象常用的方法和属性</li>
        <li>熟悉String对象常用的方法和属性</li>
        <li>熟悉Math对象常用的方法和属性</li>
        <li>了解RegExp对象常用的方法和属性</li>
    </ol>

    <table id="goods-table">
        <tr>
            <td>Id</td>
            <td>ShopName</td>
            <td>Price</td>
        </tr>
        <!--<tr>-->
            <!--<td>1</td>-->
            <!--<td>apple</td>-->
            <!--<td>5</td>-->
        <!--</tr>-->
        <!--<tr>-->
            <!--<td>2</td>-->
            <!--<td>orange</td>-->
            <!--<td>3</td>-->
        <!--</tr>-->
    </table>

    用户名:
    <input type="text" id="username" name="username" value="" />

    关键词:
    <input type="text" id="keyword" name="keyword" value="" />

    <script type="text/javascript">

        // -----------------------------
        // 1. Array 对象
        // -----------------------------
        /*
            常用方法：
                join()      // 把数组的所有元素放入一个字符串。
                pop()       // 删除数组的最后一个元素并返回删除的元素。
                push()      // 向数组的末尾添加一个或更多元素，并返回新的长度。
                reverse()   // 反转数组的元素顺序。
                sort()      // 对数组进行排序
         */
        // 1.1 将数组：["world", "Hello"]进行翻转。
        //      翻转完成后依次输出数组里的内容，并用空格进行分隔。

        // console.log("Hello world");
        // let arr = ["Hello", "world", "!"];
        // for (let value of arr){
        //     console.log(value);
        // }
        // console.log(arr.join(" "));

        // 1.2 对数组：[1, 2, 11, 20, 5] 进行排序，由数字从大到小排序。

        // let arr = [1, 2, 11, 20, 5];
        // console.log(arr.sort(function (a, b) {
        //     if (a > b){
        //         return -1;
        //     }
        //     return 1;
        // }))

        // -----------------------------
        // 2. Date 对象
        // -----------------------------
        /*
            创建时间对象：
                new Date(); // 获取当前时间对象
                new Date(时间字符串); // 获取指定时间字符串的时间对象
            常用方法：
                getFullYear() // 从 Date 对象以四位数字返回年份。
                getMonth() // 	从 Date 对象返回月份 (0 ~ 11)。
                getDate() // 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
                getHours() // 返回 Date 对象的小时 (0 ~ 23)。
                getMinutes() // 返回 Date 对象的分钟 (0 ~ 59)。
                getSeconds() // 返回 Date 对象的秒数 (0 ~ 59)。

                getTime() // 返回 1970 年 1 月 1 日至今的毫秒数。
         */
        // 2.1 显示当前的时间：年-月-日 小时:分钟:秒。

        // let date = new Date();
        // console.log(date);
        // let otherdate = new Date("2021-09-01");
        // console.log(otherdate);
        // console.log(otherdate - date);
        // console.log(date.getTime());

        // 2.2 获取当前的时间戳。

        // console.log(date.getTime());

        // 2.3 由用户输入一个时间字符串，判断字符串是否是一个合理的时间格式。

        



        // -----------------------------
        // 3. Number 对象
        // -----------------------------
        /*
            常用方法：
                toFixed() // 把数字转换为字符串，结果的小数点后有指定位数的数字。
         */
        // 3.1 服务端返回了如下商品数据:
        //       [
        //           {id: 1, name: "苹果", price: 5},
        //           {id: 2, name: "香蕉", price: 2.5},
        //           {id: 3, name: "火龙果", price: 6},
        //           {id: 4, name: "车厘子", price: 78},
        //       ]
        //      遍历打印出其中每种水果的名称和价格，价格显示类似这样的格式：￥5.0元

        // let goodsList = [
        //     {id : 1, name: "苹果", price: 5},
        //     {id : 2, name: "香蕉", price: 2.5},
        //     {id : 3, name: "火龙果", price: 6},
        //     {id : 4, name: "车厘子", price: 78},
        // ];
        // for (let item of goodsList) {
        //     console.log(item);
        //     let goodsTableElement = document.getElementById("goods-table");
        //     let trElement = document.createElement("tr");
        //
        //     let html = "<td>" + item.id + "</td><td>" + item.name + "</td><td>￥" + item.price.toFixed(1) + "元</td>";
        //     trElement.innerHTML = html;
        //
        //     goodsTableElement.appendChild(trElement);
        // }

        // -----------------------------
        // 4. String 对象
        // -----------------------------
        /*
            常用属性：
                length // 字符串的长度

            常用方法：
                indexOf() // 返回某个指定的字符串值在字符串中首次出现的位置
                replace() // 在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串
                substr() // 从起始索引号提取字符串中指定数目的字符
                substring() // 提取字符串中两个指定的索引号之间的字符
                toUpperCase() // 把字符串转换为大写
                toLowerCase() // 把字符串转换为小写
                trim() // 去除字符串两边的空白
         */
        // 4.1 设计一个用户名输入框，用户名只允许英文字符，大小写均可，填写完成后对用户名进行验证。

        // document.getElementById("username").onchange = function () {
        //     let username = this.value;
        //     let isValid = true; // 表示验证是否符合
        //     for (let char of username){
        //         console.log(char);
        //         //判断char是否是英文字符
        //         //英文字符: a-z, A-Z
        //         // if ("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".indexOf(char) === -1) {
        //         //     isValid = false;
        //         //     break;
        //         // }
        //         console.log(char + "的位置:" + "abcdefghijklmnopqrstuvwxyz".indexOf(char));
        //         if ("abcdefghijklmnopqrstuvwxyz".indexOf(char) === -1){
        //             isValid = false;
        //             break;
        //         }
        //     }
        //     if (isValid){
        //         console.log("用户名合法");
        //     } else {
        //         console.log("用户名不合法");
        //     }
        // }

        // 4.2 设计一个关键词输入框，用英文逗号分隔每个关键词，
        //      输入完毕后，将其中中文逗号替换成英文逗号。

        // document.getElementById("keyword").onchange = function () {
        //     let keyword = this.value;
        //     // this.value = keyword.replace("，", ",");
        //     this.value = keyword.replace(/，/g, ",");
        // }

        // 4.3 参考上例，判断是否输入了关键词，如果没有关键词，提示需要输入关键词。

        // document.getElementById("keyword").onblur = function () {
        //     let keyword = this.value;
        //     // this.value = keyword.replace("，", ",");
        //     this.value = keyword.replace(/，/g, ",");
        //     console.log("1111",this.value);
        //     this.value = this.value.replace(/,/g, ""); //把英文,替换成空的
        //     console.log("2222",this.value);
        //
        //     if (this.value.length === 0){
        //         console.log("请填写关键词");
        //         return false;
        //     }
        // }

        // 4.4 上面replace只能替换找到的第一个，给String对象增加一个方法，可以替换匹配的字符串。

        // String.prototype.replaceAll = function (searchValue, newValue) {
        //     console.log("replaceAll func");
        //     console.log(searchValue, newValue);
        // };
        // let result = "美国总统，大选，拜登".replaceAll("，", ",");
        // console.log(result);

        // 4.5 设计一个文本输入框，输入完毕后，自动移除字符串两边的空白。

        // document.getElementById("username").onblur = function () {
        //     console.log(this.value, this.value.length);
        //     this.value = this.value.trim();
        // }

        // -----------------------------
        // 5. Math 对象
        // -----------------------------
        /*
            常用方法：
                abs() // 返回绝对值。
                ceil() // 对数进行上舍入。
                floor() // 对数进行下舍入。
                max() // 返回最高值。
                min() // 返回最低值。
                pow() // 求幂
                random() // 返回介于 0（包含） ~ 1（不包含） 之间的一个随机数
                round() // 四舍五入
         */
        // 5.1 有一个奖品数组：[
        //          "变频滚筒洗衣机",  "iphone 12",
        //          "谢谢参与",
        //          "泡鸭爪50包", "龙岩花生5斤", "百草园大礼包", "三只松鼠大礼包"
        //          "满100减10元券",
        //          "爱奇艺会员1个月", "优酷会员1个月", "百度云盘会员1个月"
        //      ]
        //      实现一个简单的抽奖，可以抽中其中一个商品。

        // let arr = [
        //     "变频滚筒洗衣机", "iphone 12",
        //     "谢谢参与",
        //     "泡鸭爪50包", "龙岩花生5斤", "百草园大礼包", "三只松鼠大礼包",
        //     "满100减10元券",
        //     "爱奇艺会员1个月", "优酷会员1个月", "百度云盘会员1个月"
        // ];
        // console.log(arr);
        // // Math.random()*11 随机 0 ~ 11 的数字, 不包含11，包含0, 0 =< n < 11
        // // Math.floor(Math.random()*10) 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
        // let randomNum = Math.floor(Math.random() * 11);
        // console.log("中奖序号", randomNum);
        // console.log("中奖奖品", arr[randomNum]);

        // 5.2 参考上例，不同奖品的中奖概率可以设置，完成抽奖功能

        // let setArr = [
        //     {name: "变频滚筒洗衣机", "min":-1, "max": -1}, //0
        //     {name: "iphone 12", "min":-1, "max": -1}, //0
        //     {name: "谢谢参与", "min":0, "max": 8999}, //90%
        //     {name: "泡鸭爪50包", "min":9000, "max": 9014}, //0.15%
        //     {name: "龙岩花生5斤", "min":9015, "max": 9029}, //0.15%
        //     {name: "百草园大礼包", "min":9030, "max": 9039}, //0.1%
        //     {name: "三只松鼠大礼包", "min":9040, "max": 9049}, //0.1%
        //     {name: "满100减10元券", "min":9050, "max": 9849}, //8%
        //     {name: "爱奇艺会员1个月", "min":9850, "max": 9899}, //0.5%
        //     {name: "优酷会员1个月", "min":9900, "max": 9949}, //0.5%
        //     {name: "百度云盘会员1个月", "min":9950, "max": 9999}, //0.5%
        // ];
        // let setrandomNum = Math.floor(Math.random() * 10000);
        // console.log("中奖数字", setrandomNum);
        // let prize;
        // for (let item of setArr){
        //     if (item.min <= setrandomNum && item.max >= setrandomNum){
        //         prize = item;
        //         break;
        //     }
        // }
        // console.log("中奖奖品", prize);

        // 5.3 给Math对象设计一个随机数的方法，可以随机从0到n的整数。

        console.log(Math);
        Math.randomInt = function (n) { //随机
            // Math.random() * (n + 1); //0 ~ n+1 (不包括n+1)
            // Math.floor(Math.random() * (n + 1)); // 0 ~ n (包括n)
            return Math.floor(Math.random() * (n + 1));
        };

        // 随机 m ~ n 之间的整数
        // 随机 0 ~ n-m 之间的数字 + m
        Math.randomIntFromAToB = function (m, n) {
            // Math.random() * (n + 1); //0 ~ n+1 (不包括n+1)
            // Math.floor(Math.random() * (n + 1)); // 0 ~ n (包括n)
            // + m : m ~ m + n
            return this.randomInt(n - m) + m;
        };

        //单元测试,用代码来测试代码
        let randArr = [0, 0, 0, 0];
        for (let i = 0; i < 100000; i++) {
            randArr[Math.randomInt(3)] += 1;
        }
        console.log(randArr);

        // ----------------------------------------------------
        // -- 练习
        // ----------------------------------------------------
        // 1. 查询菜鸟手册网站，分别查找出Array、Date、Number、String、Math对象地址。

        //https://www.runoob.com/jsref/jsref-obj-array.html

        //https://www.runoob.com/jsref/jsref-obj-date.html

        //https://www.runoob.com/jsref/jsref-obj-number.html

        //https://www.runoob.com/jsref/jsref-obj-string.html

        //https://www.runoob.com/jsref/jsref-obj-math.html

        // 2. 每次要输出一个格式化的时间，都需要写一遍代码，
        //      尝试给Date时间对象增加一个格式化显示的方法，其中包含一个参数表示显示的时间格式。
        //      形如: format("年-月-日 小时-分钟-秒")，方法返回该格式的时间字符串
        // 3. 参考抽奖页面，实现抽奖的功能。

    </script>
</body>
</html>